<template>
  <div>
    <el-dialog
      width="960px"
      :title="config.root.detail"
      :visible.sync="drawerVisible"
      @close="$close(false)"
    >
      <div class="article-contenter" v-loading="formLoading">
        <el-form ref="form" label-width="80px" :model="form">
          <div
            class="collection"
            @click="setCollection"
            :class="{ active: form.followed }"
          >
            <i class="el-icon-star-on"></i>
            {{ form.followed ? "取消收藏" : "收藏" }}
          </div>
          <el-form-item label="发布账号">
            <div class="item">{{ form.userName | across }}</div>
          </el-form-item>
          <el-form-item label="标题">
            <div class="item">{{ form.title | across }}</div>
          </el-form-item>
          <el-form-item label="摘要">
            <div class="item">{{ form.intro | across }}</div>
          </el-form-item>
          <el-form-item label="作者">
            <div class="item">{{ form.authors | across }}</div>
          </el-form-item>
          <el-form-item label="时间">
            <div class="item">{{ form.articleTime | across }}</div>
          </el-form-item>
          <el-divider content-position="left">内容</el-divider>
          <div class="content" v-html="form.content"></div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Mixin from "@/mixins/form";
import apiCode from "@/api/apiConfig";

export default {
  mixins: [Mixin],
  data() {
    return {};
  },
  created() {
    this.getDetail();
  },
  methods: {
    // 详情
    async getDetail() {
      this.formLoading = true;
      const result = await this.$get(`api/article/${this.id}`);
      this.formLoading = false;
      if (result && result.code === apiCode.code.success) {
        this.form = result.data || {};
      }
    },
    // 收藏
    async setCollection() {
      let result = "";
      this.formLoading = true;
      if (!this.form.followed) {
        result = await this.$post(`api/article/${this.form.id}/watching`);
      } else {
        result = await this.$DELETE(`api/article/${this.form.id}/watching`);
      }
      this.formLoading = false;
      if (result && result.code === apiCode.code.success) {
        this.getDetail();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.article-contenter {
  position: relative;

  .collection {
    position: relative;
    z-index: 2;
    cursor: pointer;
    font-size: 14px;
    float: right;
    color: $ccc;

    .el-icon-star-on {
      font-size: 16px;
    }

    &.active {
      color: $mc;
    }
  }

  .content {
    padding-bottom: 15px;
    overflow: hidden;
    width: 100%;

    ::v-deep img {
      margin: 15px auto;
      max-width: 100%;
    }
  }
}
</style>
